<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" @submit.native.prevent>
      <el-form-item label="SKU查询" prop="skuAll">
        <el-input
          v-model="queryParams.skuAll"
          placeholder="请输入SKU，支持批量查询(用逗号分隔)"
          clearable
          style="width: 1600px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
        <el-button size="mini" @click="searchReset">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="exportExcel"
        >导出
        </el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="skuList" >
<!--      <el-table-column type="selection" width="55" align="center"/>-->
      <el-table-column label="id" prop="id" width="250" v-if="false"/>
      <el-table-column label="sku" prop="sku" align="center"/>
      <el-table-column label="长(CM)" prop="length"align="center" />
      <el-table-column label="宽(CM)" prop="width"align="center" />
      <el-table-column label="高(CM)" prop="height"align="center" />
      <el-table-column label="实重(KG)" prop="weight"align="center" />
      <el-table-column label="实重(LB)" prop="weightLB"align="center" />
      <el-table-column label="计费重(LB)" prop="billingWeight"align="center" />
      <el-table-column label="操作费" prop="operationFee"align="center" />
    </el-table>
  </div>
</template>

<script>
import { getListSku,getExportSku } from '@/api/amac/exceptionData'
import axios from 'axios'
import { getToken } from '@/utils/auth'

export default {
  name: "SkuQuery",
  data() {
    return {
      loading: false,
      skuList: [],
      queryParams: {
        skuAll: undefined,
      }
    };
  },
  methods: {
    handleQuery() {
      if (!this.queryParams.skuAll?.trim()) {
        this.$message.warning('请输入SKU查询条件')
        return
      }

      this.loading = true
      getListSku(this.queryParams).then(response => {
        this.skuList = response || []
      }).finally(() => {
        this.loading = false
      });
    },
    searchReset() {
      this.queryParams.skuAll = undefined
      this.skuList = []
    },
    exportExcel() {
      this.loading = true
      axios({
        method: 'post',
        url: process.env.VUE_APP_BASE_API + '/amac/exceptionalData/exportSku',  // 上传的接口地址
        data: this.skuList,
        headers: {
          'Content-Type': 'application/json',  // 修改为 application/json
          'Authorization': 'Bearer ' + getToken(),
        },
        onUploadProgress: (progressEvent) => {
          if (progressEvent.lengthComputable) {
            const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
            onProgress({ percent: percentCompleted });
          }
        },
        responseType: 'blob',  // 如果期望返回二进制文件，设置为 'blob'
      })
        .then((response) => {
          // 处理返回的二进制流
          const blob = new Blob([response.data], {
            type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
          });
          const downloadUrl = window.URL.createObjectURL(blob);
          const link = document.createElement('a');
          link.href = downloadUrl;
          link.download = `SKU导出_${new Date().getTime()}.xlsx`;
          link.click();
          window.URL.revokeObjectURL(downloadUrl);
          onSuccess(response.data);

        })
        .catch((error) => {
          onError(error);
        })
        .finally(() => {
        });
      //this.download('amac/exceptionalData/exportSku', this.skuList, `异常数据模板_${new Date().getTime()}.xlsx`)
      this.loading = false
    },
  }
};
</script>

<style scoped>
.app-container {
  padding: 20px;
}
</style>
